<template>
  <div>
    <editor v-model="myValue" :init="init" :id="tinymceId" />
    <dialog-file v-model:visible="file.dialogVisible" v-model:type="file.type" v-model:limit="file.limit" @on-confirm="handleConfirm" />
   
  </div>
</template>
<script lang="ts" setup>
import DialogFile from './File/DialogFile.vue'
//在js中引入所需的主题和组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/models/dom' // 这里是个坑 一定要引入

// 引入编辑器插件（基本免费插件都在这儿了）
import 'tinymce/plugins/advlist'  //高级列表
import 'tinymce/plugins/anchor'  //锚点
import 'tinymce/plugins/autolink'  //自动链接
import 'tinymce/plugins/autoresize'  //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import 'tinymce/plugins/autosave'  //自动存稿
import 'tinymce/plugins/charmap'  //特殊字符
import 'tinymce/plugins/code'  //编辑源码
import 'tinymce/plugins/codesample'  //代码示例
import 'tinymce/plugins/directionality'  //文字方向

import 'tinymce/plugins/fullscreen'  //全屏
import 'tinymce/plugins/help'  //帮助
//import 'tinymce/plugins/image'  //插入编辑图片
import 'tinymce/plugins/importcss'  //引入css
import 'tinymce/plugins/insertdatetime'  //插入日期时间
import 'tinymce/plugins/link'  //超链接
import 'tinymce/plugins/lists' //列表插件
//import 'tinymce/plugins/media' //插入编辑媒体
import 'tinymce/plugins/nonbreaking' //插入不间断空格
import 'tinymce/plugins/pagebreak' //插入分页符
import 'tinymce/plugins/preview'//预览
import 'tinymce/plugins/quickbars'  //快速工具栏
import 'tinymce/plugins/save'  //保存
import 'tinymce/plugins/searchreplace'  //查找替换
import 'tinymce/plugins/table'  //表格
import 'tinymce/plugins/template'  //内容模板
import 'tinymce/plugins/visualblocks'  //显示元素范围
import 'tinymce/plugins/visualchars'  //显示不
import { reactive, ref,onMounted,watch } from "vue"
import {FileType} from '@/utils/enum'
import { useCommonStore } from '@/stores/common'
const commonStore  = useCommonStore()


interface Props { //定义传参实体
    modelValue: string,
    plugins: string,
    toolbar:string
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    plugins: 'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor ',
    toolbar:'code fontSize bold italic underline strikethrough alignleft aligncenter alignright outdent indent link image media table blockquote undo redo removeformat subscript superscript  codesample hr bullist numlist charmap preview anchor pagebreak insertdatetime  forecolor backcolor fullscreen',
  })
interface Emits { //定义事件
    (e: 'update:modelValue', value: any): void
  }
const emit = defineEmits<Emits>()

//编辑器
const tinymceId = ref("vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""))
const init = reactive({
  selector: '#' + tinymceId.value, 
  language_url: "/tinymce/langs/zh_CN.js", 
  language: "zh_CN",
  skin_url: "/tinymce/skins/ui/oxide", 
  height: 400,
  toolbar: props.toolbar, 
  plugins: props.plugins, 
  setup:function(editor:any) {
    editor.ui.registry.addButton('image',{
        text:'',
        icon:'image',
        onAction:function(){
            file.value.dialogVisible = true
            file.value.limit = 30
            file.value.type = FileType.Image
        }
    })

    editor.ui.registry.addButton('media',{
        text:'',
        icon:'embed',
        onAction:function(){
            file.value.dialogVisible = true
             file.value.limit = 1
            file.value.type = FileType.Video
        }
    })

  }
})
const file = ref<any>({
  dialogVisible:false,
  type:FileType.Image
})

const myValue = ref(props.modelValue)
 watch(()=>myValue.value,() =>{
    emit('update:modelValue', myValue.value)
 })
 watch(()=>props.modelValue,() =>{
  myValue.value = props.modelValue
 })

const handleConfirm = (list:any):void => {
  list.forEach((item:any) => {
      if(file.value.type == FileType.Image) 
        tinymce.get(tinymceId.value).insertContent(`<img class="wscnph" src="${commonStore.setting.fileDomain + item}" >`)
      else
        tinymce.get(tinymceId.value).insertContent(`<video src="${commonStore.setting.fileDomain}${item.path}" controls style="max-width:100%" rel-path="${item.path}" rel-poster="${commonStore.setting.fileDomain}${item.cover}">1</video>`)
  })
}

onMounted(() => {
   if(!commonStore.setting.fileDomain)
    commonStore.getSetting()
  tinymce.init({})
})
</script>

